1 00:00:00,730 --> 00:00:07,870 Bien, ahora que tenemos la vista previa de nuestra colección, debemos comenzar a crear nuestro elemento de menú. 2 00:00:07,870 --> 00:00:18,760 componente para que sepamos que nuestro componente de elemento de menú consistirá en una imagen y un título, 3 00:00:19,120 --> 00:00:23,890 un precio, y este botón que nos permite añadirlo al carrito. 4 00:00:24,710 --> 00:00:29,620 Ahora bien, todavía no vamos a agregar ninguna funcionalidad. 5 00:00:29,890 --> 00:00:32,950 Realmente todavía no hemos considerado cómo manejar nuestro carrito. 6 00:00:33,730 --> 00:00:37,060 Pero primero desarrollemos este componente. 7 00:00:37,900 --> 00:00:43,330 Entonces, agreguemos un elemento de colección a nuestros componentes. 8 00:00:44,660 --> 00:00:50,500 Y en nuestra carpeta, haremos lo mismo que hemos estado haciendo con los componentes de nuestros elementos de colección. 9 00:00:51,830 --> 00:01:02,600 y luego nuestra colección de estilos de puntos de elementos que nos pregunta: cuanto más escribas esto, mejor obtendrás 10 00:01:02,600 --> 00:01:02,840 en eso. 11 00:01:03,650 --> 00:01:10,070 Lo que siempre es realmente interesante es que al principio siempre parece un poco repetitivo, pero 12 00:01:10,460 --> 00:01:17,570 En realidad, descubres que realmente terminas recordando todo y cuál es su propósito. 13 00:01:17,570 --> 00:01:22,730 Practica escribir la misma estructura de carpetas para sus componentes y qué hacer con ellos. 14 00:01:23,380 --> 00:01:26,240 Bien, ahora nuestro artículo de colección. 15 00:01:26,540 --> 00:01:32,660 Sabemos que necesitamos ciertas cosas para que nuestro menú sea popular, pero no necesitamos 16 00:01:32,660 --> 00:01:33,260 cualquier estado. 17 00:01:33,620 --> 00:01:36,830 Entonces, hagamos otro componente funcional. 18 00:01:37,670 --> 00:01:43,970 Entonces el elemento de colección CONSED es igual a este componente funcional. 19 00:01:45,520 --> 00:01:48,640 Devuelve este Divx con nuestro nombre de clase. 20 00:01:50,210 --> 00:01:56,150 Elemento de colección, y luego le daremos un div. 21 00:01:57,190 --> 00:02:04,470 Y ahora que Divx contendrá nuestra imagen, démosle el nombre de clase de imagen por ahora. 22 00:02:06,020 --> 00:02:07,190 Y vamos. 23 00:02:08,250 --> 00:02:15,630 Haga lo mismo que hicimos antes con los elementos de nuestro directorio, para que sepamos a qué vamos. 24 00:02:15,630 --> 00:02:17,580 pasar será un. 25 00:02:18,600 --> 00:02:20,550 También obtendremos nuestro nombre. 26 00:02:21,700 --> 00:02:25,750 Obtendremos nuestro precio y la URL de nuestra imagen, y los tendremos todos. 27 00:02:26,820 --> 00:02:34,920 Cuando incorporamos esos datos anteriormente en nuestra colección o lo siento, en nuestra página de tienda, directamente en nuestra tienda 28 00:02:34,920 --> 00:02:39,960 datos específicamente, por lo que necesitamos un nombre de identificación, imagen y precio. 29 00:02:41,880 --> 00:02:44,370 Ahora vamos a hacerlo. 30 00:02:46,740 --> 00:02:54,510 Ponga lo que hicimos antes con nuestro estilo y vamos a hacer que la imagen de fondo vaya a nuestra cadena. 31 00:02:54,510 --> 00:02:57,150 valor de interpolación de. 32 00:02:58,470 --> 00:02:59,950 Imagínate, Earl. 33 00:03:01,590 --> 00:03:08,930 Así que no hay nada nuevo aquí todavía, y luego agregaremos otro d'Hiv y aquí agregaremos 34 00:03:08,940 --> 00:03:10,440 nuestra colección para. 35 00:03:11,500 --> 00:03:11,920 Ahora. 36 00:03:13,020 --> 00:03:14,190 Dentro de nuestro Futter. 37 00:03:15,630 --> 00:03:22,710 Tenemos una repetición doble, de hecho, ni siquiera necesitamos esta etiqueta de cierre, vamos a traer 38 00:03:22,710 --> 00:03:27,960 en nuestro lapso, cual será nuestro nombre. 39 00:03:29,100 --> 00:03:32,040 Así como nuestro. 40 00:03:35,430 --> 00:03:36,000 Impresionante. 41 00:03:36,070 --> 00:03:39,530 Bien, ahora exportemos esto. 42 00:03:41,740 --> 00:03:47,140 Y traigamos las estrellas que tenemos para este componente, así que ya las escribí para nosotros, 43 00:03:47,140 --> 00:03:49,900 pero podemos echar un vistazo rápido a cuáles son. 44 00:03:53,200 --> 00:03:59,150 Dentro de nuestro artículo de colección, estamos diseñando nuestra imagen para que su altura sea del noventa y cinco por ciento. 45 00:03:59,950 --> 00:04:05,980 Eso significa que la altura de nuestra colección de fotos será el cinco por ciento de la altura total de nuestra 46 00:04:05,980 --> 00:04:08,380 elemento de colección, que será de 350 píxeles. 47 00:04:09,470 --> 00:04:14,510 Así que este será prácticamente el diseño de nuestro componente real, lo que vemos aquí. 48 00:04:16,050 --> 00:04:23,760 Entonces, una cosa importante a tener en cuenta es que la columna de Fleck sobre nuestro artículo de colección esencialmente permitirá 49 00:04:23,760 --> 00:04:27,510 nuestro Futter y nuestra imagen se sientan en una alineación vertical. 50 00:04:27,700 --> 00:04:28,080 Bien. 51 00:04:29,130 --> 00:04:35,250 Y luego nuestra colección, Futter, es solo nuestra pantalla flexible habitual, y luego tenemos algo de espacio entre 52 00:04:35,250 --> 00:04:43,530 ellos para que nuestro contenido se destaque, nuestro título ocupa el 90 por ciento del espacio en nuestro total 53 00:04:43,530 --> 00:04:46,340 pie de página y luego el precio será del 10 por ciento. 54 00:04:46,350 --> 00:04:52,170 Entonces, debido a que nuestro precio probablemente nunca aumentará tanto, debemos asegurarnos de tener nuestro 55 00:04:52,170 --> 00:04:54,720 El nombre ocupa la mayor parte del espacio aquí. 56 00:04:56,140 --> 00:04:56,680 DE ACUERDO. 57 00:04:57,580 --> 00:05:07,600 Ahora, si importamos el elemento de nuestra colección a la vista previa de nuestra colección para que podamos acceder. 58 00:05:08,760 --> 00:05:10,950 El nuevo artículo de colección que escribimos. 59 00:05:15,370 --> 00:05:25,030 Ahora podemos, en lugar de hacer el stiv, simplemente mapearlo así y porque necesitamos las propiedades. 60 00:05:25,030 --> 00:05:30,220 En el elemento que teníamos antes, simplemente haremos lo que hicimos antes. 61 00:05:31,410 --> 00:05:37,920 Y vamos a reestructurar nuestra identificación, pero también vamos a reestructurar el resto de nuestro artículo. 62 00:05:37,920 --> 00:05:43,020 accesorios y páselo así. 63 00:05:44,030 --> 00:05:46,430 Hagamos otros accesorios de artículos. 64 00:05:48,280 --> 00:05:48,670 WAP. 65 00:05:49,650 --> 00:05:52,080 Y ahora ya no es un div. 66 00:05:54,580 --> 00:06:01,480 Bueno, solo asegúrate de estructurar en D o distribuir nuestros otros accesorios de artículos en nuestro artículo de colección. 67 00:06:03,460 --> 00:06:06,250 Oh, también tenemos que iniciar una vista previa de la colección. 68 00:06:08,320 --> 00:06:11,020 Entonces esos estilos están aquí abajo. 69 00:06:14,610 --> 00:06:16,250 Bien, ahí vamos. 70 00:06:17,310 --> 00:06:22,800 Entonces tenemos nuestro precio y tenemos lo nuestro porque no hay ningún estilo, simplemente inspeccionemos 71 00:06:22,800 --> 00:06:24,960 rápidamente y ver si nos falta algo. 72 00:06:25,380 --> 00:06:31,260 Entonces, mientras codificas, es posible que veas que esto sucede, solo debes asegurarte de que nuestro nombre sea correcto. 73 00:06:31,260 --> 00:06:33,150 para todo y nos quedamos con el lápiz óptico. 74 00:06:33,870 --> 00:06:37,470 Entonces no veo que las estrellas que escribimos se apliquen aquí. 75 00:06:39,210 --> 00:06:45,450 Aunque aquí estamos obteniendo la imagen real que se representa así. 76 00:06:47,700 --> 00:06:52,550 Oh, veo nuestra colección anterior, nuestro artículo de colección. 77 00:06:54,070 --> 00:06:55,390 Oh, no salvamos. 78 00:06:58,230 --> 00:06:59,130 Errores tontos. 79 00:06:59,820 --> 00:07:08,100 Entonces, a veces, si simplemente echas un vistazo al interior de tus herramientas de desarrollo, es muy fácil ver dónde 80 00:07:08,100 --> 00:07:14,760 vamos mal porque lo sabemos con certeza, debido a la forma en que está configurada la reacción, todo debería 81 00:07:14,760 --> 00:07:16,460 estar en un momento específico. 82 00:07:16,470 --> 00:07:20,680 Entonces, si no se carga, probablemente hayamos estropeado nuestra importación. 83 00:07:20,700 --> 00:07:22,920 Correcto, lo cual comprobamos primero. 84 00:07:22,930 --> 00:07:23,210 Bien. 85 00:07:23,220 --> 00:07:27,060 Nos aseguramos de importar el artículo de colección correcto, y así fue. 86 00:07:27,720 --> 00:07:31,620 Y luego verificamos si teníamos nuestros nombres como los de nuestras clases. 87 00:07:31,620 --> 00:07:32,070 Correcto. 88 00:07:32,520 --> 00:07:34,650 Lo cual hicimos. 89 00:07:35,580 --> 00:07:38,190 Entonces resultó que no lo guardamos. 90 00:07:38,220 --> 00:07:41,580 Así que es un error tonto, pero hay muchísimos de esos. 91 00:07:41,580 --> 00:07:47,010 A medida que te conviertes en desarrollador profesional, muchas veces descubrirás que simplemente estás golpeando tu 92 00:07:47,010 --> 00:07:52,360 Dirígete contra la pared durante 30 minutos, solo para descubrir que tenías un pequeño error tipográfico. 93 00:07:52,740 --> 00:07:58,440 Es muy común, pero así de simple, ahora tenemos nuestro componente de colección. 94 00:08:00,220 --> 00:08:06,790 Entonces, lo único que nos falta es el efecto de desplazamiento con el botón Agregar, pero podemos agregarlo en un momento. 95 00:08:06,790 --> 00:08:12,150 más tarde, cuando realmente construyamos nuestro carrito, porque a eso estará vinculada esa característica. 96 00:08:12,850 --> 00:08:19,810 Y una cosa más antes de enviar nuestro código, debemos agregar un poco de relleno a nuestro código general. 97 00:08:19,810 --> 00:08:24,090 proyecto para que se alinee más cerca de esto. 98 00:08:24,550 --> 00:08:33,590 Así que vayamos a nuestra aplicación, éxito del DOT, y rellenemos 20 y 80 píxeles. 99 00:08:34,240 --> 00:08:38,230 Entonces quiero 20 píxeles en la parte superior e inferior y luego 80 píxeles en el costado. 100 00:08:38,380 --> 00:08:39,160 Y ahora. 101 00:08:40,100 --> 00:08:41,180 Parece más cercano. 102 00:08:42,240 --> 00:08:48,600 Entonces esto puede ser un poco más de lo que teníamos, así que tal vez hagamos esto 60 píxeles. 103 00:08:52,320 --> 00:08:52,860 Es mucho mejor. 104 00:08:53,220 --> 00:08:53,790 Eso es bastante bueno. 105 00:08:54,480 --> 00:08:55,600 Así que ahora confirmemos nuestro código. 106 00:08:56,070 --> 00:08:57,360 Volvamos a nuestra terminal. 107 00:08:58,580 --> 00:09:04,740 Hagamos un get y está bien, veamos qué tenemos que comprometer primero. 108 00:09:05,030 --> 00:09:08,750 Bien, entonces comprometámonos. 109 00:09:10,570 --> 00:09:14,590 Actualizando nuestra aplicación con una página de tienda. 110 00:09:15,870 --> 00:09:21,810 Colección, componente de vista previa y componente de elemento de colección. 111 00:09:23,010 --> 00:09:26,220 Y ahora pasemos al maestro de origen push. 112 00:09:27,930 --> 00:09:29,590 Bien, nuestro código está activo. 113 00:09:29,850 --> 00:09:31,050 Ahora sigamos adelante.